<template>
  <div class="login-container">
    <el-card class="login-card">
      <template #header>
        <div class="login-header">
          <h2>登录页面</h2>
        </div>
      </template>

      <el-form
          ref="loginForm"
          :model="formData"

          @submit.prevent="handleSubmit"
      >
        <el-form-item prop="qqNum">
          <el-input
              v-model="formData.qqNum"
              placeholder="请输入QQ号码或者手机号"
              prefix-icon="User"
              clearable
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
              v-model="formData.password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              show-password
              clearable
          />
        </el-form-item>


        <el-form-item>
          <el-button
              type="primary"
              class="login-btn"
              @click="handleSubmit"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--   to 到对应url的路由-->
    <router-link to="/register">去注册</router-link>
  </div>

</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import {login} from '../api/qqUser.js'
import {useRouter} from "vue-router";


const formData = ref({
  id: 0,
  qqNum: '',
  password: '',
})


const router = useRouter();
const handleSubmit = async () => {
  // 调用登录API
  const {code} = await login(formData.value)

  if (code === 200) {
    ElMessage.success('登录成功-- 写登录成功的逻辑')
    router.push('/index')
  } else {
    ElMessage.error('用户名或密码错误')
  }
}


</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-header {
  text-align: center;
  color: #409eff;
}

.login-btn {
  width: 100%;
}
</style>